<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head
	th:replace="mall/header::head-fragment('NewBee商城-个人中心','personal')">
<link rel="icon" th:href="@{/static/favicon.ico}" type="image/x-icon" />
</head>
<link th:href="@{/mall/css/bootstrap-modal.css}" rel="stylesheet">
<body>
	<header th:replace="mall/header::header-fragment"></header>
	<!-- nav -->
	<nav th:replace="mall/header::nav-fragment"></nav>

	<!-- personal -->
	<div id="personal">
		<div class="self-info center">

			<!-- sidebar -->
			<div th:replace="mall/personal-sidebar::sidebar-fragment"></div>

			<div class="intro fr">
				<div class="grzlbt ml40">
					我的资料 <a href="javascript:openUpdateModal();"
						style="color: #1baeae; margin-left: 600px;">更改个人信息</a>
				</div>
				<div class="info_item ml40">
					<span>昵称</span><span th:text="${session.newBeeMallUser.nickName}">newbee-mall</span>
				</div>
				<div class="info_item ml40">
					<span>手机号</span><span th:text="${session.newBeeMallUser.loginName}">newbee-mall</span>
				</div>
				<div class="info_item ml40">
					<span>密码</span><span>******</span>
				</div>
				<div class="info_item ml40">
					<span>个性签名</span><span
						th:text="${session.newBeeMallUser.introduceSign==''?'无':session.newBeeMallUser.introduceSign}">newbee-mall</span>
				</div>
				<div class="info_item ml40">
					<span>收货信息</span><span
						th:text="${session.newBeeMallUser.address==''?'无':session.newBeeMallUser.address}">newbee-mall</span></span>
				</div>

			</div>
			<div class="clear"></div>
		</div>
		<div class="content">
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="personalInfoModal" tabindex="-1"
				role="dialog" aria-labelledby="personalInfoModalLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
							<h6 class="modal-title" id="personalInfoModalLabel">个人信息修改</h6>
						</div>
						<div class="modal-body">
							<form id="personalInfoForm">
								<div class="form-group">
									<label for="nickName" class="control-label">昵称:</label> <input
										type="hidden" id="userId"
										th:value="${session.newBeeMallUser.userId}"> <input
										type="text" class="form-control" id="nickName" name="nickName"
										placeholder="请输入昵称"
										th:value="${session.newBeeMallUser.nickName}" required="true">
								</div>
								<div class="form-group">
									<label for="introduceSign" class="control-label">个性签名:</label>
									<input type="text" class="form-control" id="introduceSign"
										name="introduceSign" placeholder="请输入个性签名"
										th:value="${session.newBeeMallUser.introduceSign}"
										required="true">
								</div>
								<div class="form-group">
									<label for="address" class="control-label">收货信息:</label> <input
										type="text" class="form-control" id="address" name="address"
										placeholder="请输入收货信息"
										th:value="${session.newBeeMallUser.address}" required="true">
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default"
								data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" id="saveButton">确认</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.modal -->
		</div>
	</div>

	<div th:replace="mall/footer::footer-fragment"></div>

	<!-- jQuery -->
	<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>
	<!-- Bootstrap 3 -->
	<script th:src="@{/mall/js/bootstrap3.js}"></script>
	<script th:src="@{/mall/js/search.js}" type="text/javascript"></script>
	<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
	<script type="text/javascript">
		function openUpdateModal() {
			$('#personalInfoModal').modal('show');
		}

		//绑定modal上的保存按钮
		$('#saveButton').click(function() {
			var address = $("#address").val();
			if (address.trim().length < 10) {
				swal("请输入正确的收货信息", {
					icon : "error",
				});
				return;
			}
			var introduceSign = $("#introduceSign").val();
			if (introduceSign.trim().length < 4) {
				swal("请输入正确的个性签名", {
					icon : "error",
				});
				return;
			}
			var nickName = $("#nickName").val();
			if (nickName.trim().length < 2) {
				swal("请输入正确的昵称", {
					icon : "error",
				});
				return;
			}
			var userId = $("#userId").val();
			var data = {
				"userId" : userId,
				"address" : address,
				"introduceSign" : introduceSign,
				"nickName" : nickName
			};
			$.ajax({
				type : 'POST',//方法类型
				url : '/personal/updateInfo',
				contentType : 'application/json',
				data : JSON.stringify(data),
				success : function(result) {
					if (result.resultCode == 200) {
						$('#personalInfoModal').modal('hide');
						window.location.reload();
					} else {
						$('#personalInfoModal').modal('hide');
						alert(result.message);
					}
					;
				},
				error : function() {
					alert('操作失败');
				}
			});
		});
	</script>
</body>
</html>